<template>
  <div>
    <listHeader />
    <button @click="clickCt" >test</button>
    <label> {{ count }} | {{ doubleCount }}</label>
    <listFilter />
    <listContent />
  </div>
</template>

<script>
import listFilter from './listFilter.vue'
import listHeader from './listHeader.vue'
import listContent from './listContent.vue'
import { useCounterStore } from '@/stores/counter.js'
export default {
  components: { listFilter, listHeader, listContent },
  computed: {
    count() {
      return useCounterStore().count
    },
    doubleCount() {
      return useCounterStore().doubleCount
    }
  },
  methods: {
    clickCt() {
      useCounterStore().increment()
    }
  }
};
</script>

<style scoped>
/* 样式可以根据你的需要自行添加 */
h1 {
  text-align: center;
}

table {
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>
